<template>
  <!-- 门禁-通行记录 -->
  <div class="swipe_details">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" :inline="true">
      <el-form-item label="开始日期:">
        <el-date-picker
          v-model="datetime[0]"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="开始日期"
          style="width: 130px"
          size="mini"
          :clearable="false"
        ></el-date-picker>
        <el-time-picker
          style="width:110px"
          v-model="time[0]"
          value-format="HH:mm:ss"
          placeholder="开始时间"
          :clearable="false"
          size="mini"
        ></el-time-picker>
      </el-form-item>
      <el-form-item label="结束日期:">
        <el-date-picker
          v-model="datetime[1]"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="结束日期"
          style="width: 130px"
          size="mini"
          :clearable="false"
        ></el-date-picker>
        <el-time-picker
          style="width:110px"
          v-model="time[1]"
          value-format="HH:mm:ss"
          placeholder="结束时间"
          :clearable="false"
          size="mini"
        ></el-time-picker>
      </el-form-item>
      <el-form-item label="卡号:">
        <el-input
          v-model="ruleForm.cardNumber"
          placeholder="请输入卡号"
          size="mini"
          clearable
          style="width: 150px"
        ></el-input>
      </el-form-item>

      <el-form-item label="姓名:">
        <el-input
          v-model="ruleForm.userName"
          placeholder="请输入姓名"
          size="mini"
          clearable
          style="width: 150px"
        ></el-input>
      </el-form-item>

      <el-form-item label="编号:">
        <el-input
          v-model="ruleForm.userNumber"
          placeholder="请输入编号"
          size="mini"
          clearable
          style="width: 150px"
        ></el-input>
      </el-form-item>

      <el-form-item label="设备编号:">
        <el-input
          v-model="ruleForm.terminalCode"
          placeholder="请输入设备名称"
          size="mini"
          clearable
          style="width: 150px"
        ></el-input>
      </el-form-item>

      <el-form-item label="门名称:">
        <el-input
          v-model="ruleForm.doorName"
          placeholder="请输入门名称"
          size="mini"
          clearable
          style="width: 150px"
        ></el-input>
      </el-form-item>

      <el-form-item label="部门:">
        <el-select
          v-model="ruleForm.departmentGuid"
          placeholder="请选择"
          size="mini"
          clearable
          style="width: 150px"
        >
          <el-option label="全部部门" value></el-option>
          <el-option
            v-for="item in departmentInfo"
            :key="item.departmentGuid"
            :label="item.departmentName"
            :value="item.departmentGuid"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="门禁类型:">
        <el-select
          v-model="ruleForm.dataType"
          placeholder="请选择"
          size="mini"
          clearable
          style="width: 150px"
        >
          <el-option label="全部类型" value></el-option>
          <el-option
            v-for="item in cardtypesoption"
            :key="item.label"
            :label="item.label"
            :value="item.label"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item class="searchmarigin">
        <el-button type="primary" @click="onSubmit" size="mini" icon="el-icon-search">查询</el-button>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onExport" size="mini" icon="el-icon-document-copy">导出</el-button>
      </el-form-item>
    </el-form>
    <div class="tablemain">
      <el-table
        v-loading="loading"
        :data="detailslist"
        ref="table"
        border
        highlight-current-row
        style="width: 100%"
        :header-cell-style="headFirst"
        :cell-style="(res) => headFirst_col(res, [])"
      >
        <el-table-column prop="departmentName" label="部门名称" min-width="110px"></el-table-column>
        <el-table-column prop="cardNumber" label="卡号" min-width="120px"></el-table-column>
        <el-table-column prop="userNumber" label="人员编号" min-width="110px"></el-table-column>
        <el-table-column prop="userName" label="姓名"></el-table-column>
        <el-table-column prop="dataMakeTime" label="通行时间" min-width="160px"></el-table-column>
        <el-table-column prop="terminalCode" label="设备编号"></el-table-column>
        <el-table-column prop="doorName" label="门名称"></el-table-column>
        <el-table-column prop="openType" label="进出方向">
          <template slot-scope="scope">
            {{
            scope.row.openType | openType_Type
            }}
          </template>
        </el-table-column>
        <el-table-column prop="areaName" label="区域名称"></el-table-column>
        <el-table-column prop="dataType" label="刷卡类型">
          <template slot-scope="scope">
            {{
            scope.row.dataType | dataType_Type
            }}
          </template>
        </el-table-column>
      </el-table>
      <div class="page">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChangepage"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="recordCount"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
import cloneDeep from 'lodash/cloneDeep'
export default {
  data() {
    return {
      // 导出名称
      filename: '门禁通行记录',
      // 部门列表
      departmentInfo: [],
      // 类型列表
      cardtypesoption: [
        {
          label: '正常刷卡',
          value: 1
        },
        {
          label: '按键开门',
          value: 11
        },
        {
          label: '远程开门',
          value: 14
        },
        {
          label: '非法卡',
          value: 2
        },
        {
          label: '门磁报警',
          value: 12
        },
        {
          label: '报警输入',
          value: 13
        },
        {
          label: '超级用户开门',
          value: 15
        },
        {
          label: '刷卡',
          value: 17
        },
        {
          label: '（刷卡）密码开门',
          value: 16
        }
      ],
      rules: {
        // Date: [{ required: true, message: "日期必须选择", trigger: "blur" }],
      },
      // 表单数据
      ruleForm: {
        departmentGuid: '',
        // 卡号
        cardNumber: '',
        userName: '',
        // 用户编号
        userNumber: '',
        // 设备编号
        terminalCode: '',
        // 门名称
        doorName: '',
        dataType: '',
        Date: [],
        startTime: '00:00:00',
        endTime: '23:59:59'
      },
      // 通行数据
      detailslist: [],
      loading: false,
      pageNum: 1,
      pageSize: 20,
      currentPage: 1,
      recordCount: 0,
      searchInfo: [],
      // 时间
      datetime: [],
      time: []
    }
  },
  props: ['roomGuid'],
  filters: {
    openType_Type(val) {
      val = Number(val)
      switch (val) {
        case 0:
          return '进门'
          break
        case 1:
          return '出门'
          break
      }
    },
    dataType_Type(val) {
      val = Number(val)
      switch (val) {
        case 1:
          return '刷卡开门'
          break
        case 2:
          return '非法卡'
          break
        case 11:
          return '按键开门'
          break
        case 12:
          return '门磁报警'
          break
        case 13:
          return '报警输入'
          break
        case 14:
          return '远程开门'
          break
        case 15:
          return '超级用户开门'
          break
        case 16:
          return '（刷卡）密码开门'
          break
        case 17:
          return '刷卡'
        case 50:
          return '刷脸开门'
          break
        case 51:
          return '卡+人脸开门'
          break
        case 52:
          return '人脸识别失败'
          break
      }
    }
  },
  created() {
    this.userGuid = sessionStorage.getItem('administrator')
    // 初始化时间
    this.datetime = [this.getNowTime('yy-mm-dd'), this.getNowTime('yy-mm-dd')]
    this.time = ['00:00:00', '23:59:59']
    this.getDepartment()
  },
  mounted() {
    // this.onSubmit()
  },
  computed: {
    changeschoolid: {
      get() {
        return this.$store.state.user.changeschoolid
      }
    }
  },
  methods: {
    // 部门查询
    getDepartment() {
      this.$http({
        url: this.$http.adornUrl('/department/query-department-info'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            unitGuid: this.changeschoolid
          },
          messageType: 0
        })
      }).then(({ data }) => {
        if (data.messageCode == 200) {
          console.log(data.messageContent)
          this.departmentInfo = data.messageContent
        } else {
          this.$message.error(data.errorMessage)
        }
      })
    },
    // 点击查询后触发
    onSubmit() {
      this.pageNum = 1
      this.getList()
    },
    getList() {
      this.$refs['ruleForm'].validate(valid => {
        if (valid) {
          let obj = cloneDeep(this.ruleForm)
          let searchInfo = {
            ...obj
          }
          searchInfo.startTime = this.datetime[0] + ' ' + this.time[0]
          searchInfo.endTime = this.datetime[1] + ' ' + this.time[1]
          searchInfo.unitGuid = this.changeschoolid
          this.searchInfo = searchInfo
          this.loading = true
          this.$http({
            url: this.$http.adornUrl(
              '/terminal/entrance/entrance-data-search-page'
            ),
            method: 'post',
            data: this.$http.adornData({
              messageContent: {
                asc: true,
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                searchInfo: searchInfo
              },
              messageType: 0
            })
          }).then(({ data }) => {
            this.loading = false
            if (data.messageCode == 200) {
              if (data.messageContent.data.length == 0) {
                this.$message({
                  message: '查询成功当前暂无数据',
                  type: 'success'
                })
              }
              this.currentPage = data.messageContent.pageNum
              this.recordCount = data.messageContent.recordCount
              this.detailslist = data.messageContent.data
            } else {
              this.$message.error(data.errorMessage)
            }
          })
        } else {
          return false
        }
      })
    },
    // 导出数据
    onExport() {
      if (this.detailslist.length == 0) {
        this.$message({
          message: '无数据可导出',
          type: 'warning'
        })
        return false
      }
      this.outexecelinit()
    },
    // 通行记录导出方法
    outexecelinit() {
      if (this.recordCount.length == 0) {
        this.$message({
          message: '无数据可导出',
          type: 'warning'
        })
        return false
      }
      this.$http({
        url: this.$http.adornUrl(
          '/terminal/entrance/entrance-data-search-page'
        ),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            asc: true,
            pageNum: 1,
            pageSize: this.recordCount,
            searchInfo: this.searchInfo
          },
          messageType: 0
        })
      }).then(({ data }) => {
        let detailslist = data.messageContent.data
        detailslist.map(item => {
          console.log(this.$options.filters)
          item.dataType = this.$options.filters.dataType_Type(item.dataType)
          item.openType = this.$options.filters.openType_Type(item.openType)
        })
        const nowtime = this.getimeto()
        require.ensure([], () => {
          const multiHeader = []
          const multiHeader2 = []
          const merges = []
          const { export_json_to_excel } = require('../../excel/Export2Excel')
          let tHeader = [
            '部门名称',
            '卡号',
            '人员编号',
            '姓名',
            '通行时间',
            '设备编号',
            '门名称',
            '进出方向',
            '区域名称',
            '门禁类型'
          ]
          const filterVal = [
            'departmentName',
            'cardNumber',
            'userNumber',
            'userName',
            'dataMakeTime',
            'terminalCode',
            'doorName',
            'openType',
            'areaName',
            'dataType'
          ]
          const list = detailslist
          const data = this.formatJson(filterVal, list)
          export_json_to_excel({
            multiHeader, //这里是第一行的表头
            multiHeader2, //这里是第二行的表头
            header: tHeader, //这里应该是算第三行的表头
            data,
            merges,
            filename: this.filename + nowtime
          })
        })
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.getList()
    },
    handleCurrentChangepage(val) {
      this.pageNum = val
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
.swipe_details {
  padding: 10px;
  //滚动条的宽度
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  //滚动条的滑块
  ::-webkit-scrollbar-thumb {
    background-color: #a1a3a9;
    border-radius: 3px;
  }
  .el-table__row .el-table__row--level-1 {
    background-color: #e5e9f2;
  }
  .el-form--inline .el-form-item {
  }
  .el-form.el-form--inline {
    /deep/.el-form-item__label {
      padding-right: 5px;
    }
    /deep/.el-form-item {
      margin-bottom: 0px;
    }
    .el-date-editor.el-input,
    .el-date-editor.el-input__inner {
      width: 330px;
    }
  }
  .demo-form-inline1 {
    border-bottom: 1px solid #e5e9f2;
    .searchmarigin {
      margin-left: 20px;
    }
  }
  .page {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>